<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 主内容区 -->
    <el-main class="container mx-auto px-4 py-8">
      <!-- 走马灯轮播图 -->
      <div class="mb-12">
        <el-carousel height="400px" arrow="always" indicator-position="outside">
          <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
            <div class="relative h-full w-full overflow-hidden rounded-lg shadow-lg">
              <img :src="item.image" alt="食堂菜品展示" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                <div class="p-6 text-white">
                  <h3 class="text-2xl font-bold mb-2">{{ item.title }}</h3>
                  <p class="text-sm opacity-90">{{ item.description }}</p>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 食堂介绍 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
        <div class="order-2 md:order-1">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">关于我们的智慧食堂</h2>
          <div class="w-20 h-1 bg-red-500 mb-6"></div>
          <p class="text-gray-600 mb-4 leading-relaxed">
            智慧食堂管理系统致力于为您提供高效、便捷、安全的用餐体验。我们采用先进的技术手段，
            从菜品管理、订单处理到用户评价，实现全流程数字化管理，让食堂运营更加智能化。
          </p>
          <p class="text-gray-600 mb-6 leading-relaxed">
            我们的食堂采用新鲜食材，由专业厨师精心烹饪，为您提供营养均衡、美味可口的餐食。
            同时，我们注重食品安全和卫生，严格把控每一个环节，确保您吃得放心。
          </p>
          <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="flex items-center">
              <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
              <span class="text-gray-700">新鲜食材</span>
            </div>
            <div class="flex items-center">
              <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
              <span class="text-gray-700">专业厨师</span>
            </div>
            <div class="flex items-center">
              <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
              <span class="text-gray-700">营养均衡</span>
            </div>
            <div class="flex items-center">
              <i class="fa-solid fa-check-circle text-green-500 mr-2"></i>
              <span class="text-gray-700">便捷支付</span>
            </div>
          </div>
          <el-button type="primary" size="large" class="px-8">了解更多</el-button>
        </div>
        <div class="order-1 md:order-2 relative">
          <img src="https://picsum.photos/id/431/600/400" alt="食堂环境" class="w-full h-auto rounded-lg shadow-xl">
          <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg max-w-[200px]">
            <div class="flex items-center mb-2">
              <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
              <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
              <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
              <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
              <i class="fa-solid fa-star-half-stroke text-yellow-400"></i>
            </div>
            <p class="text-sm text-gray-600">"菜品丰富，口味好，服务周到，是午餐的好去处！"</p>
            <p class="text-xs text-gray-400 mt-1">- 张先生</p>
          </div>
        </div>
      </div>

      <!-- 特色服务 -->
      <div class="text-center mb-16">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">我们的特色服务</h2>
        <div class="w-20 h-1 bg-red-500 mx-auto mb-10"></div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa-solid fa-clock text-2xl text-red-600"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">智能点餐</h3>
            <p class="text-gray-600">提前在线点餐，减少排队时间，到店即可取餐，高效便捷。</p>
          </div>
          <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa-solid fa-chart-pie text-2xl text-blue-600"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">营养分析</h3>
            <p class="text-gray-600">每道菜品都提供详细的营养成分分析，帮助您做出健康的饮食选择。</p>
          </div>
          <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa-solid fa-comments text-2xl text-green-600"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">实时评价</h3>
            <p class="text-gray-600">用餐后可实时评价菜品和服务，您的反馈将帮助我们不断提升品质。</p>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 走马灯数据
const carouselItems = ref([
  {
    image: 'https://picsum.photos/id/1080/800/400',
    title: '新鲜食材，健康美味',
    description: '我们精选优质食材，为您提供健康美味的餐食'
  },
  {
    image: 'https://picsum.photos/id/292/800/400',
    title: '智能点餐，便捷体验',
    description: '提前在线点餐，减少排队时间，到店即可取餐'
  },
  {
    image: 'https://picsum.photos/id/431/800/400',
    title: '舒适环境，愉悦用餐',
    description: '宽敞明亮的用餐环境，让您在用餐时倍感舒适'
  }
])

// 页面加载完成后执行
onMounted(() => {
  console.log('智慧食堂首页加载完成')
})
</script>

<style scoped>
/*天幕*/
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/*统计*/
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}


</style>